<!--  -->
<template>
  <div class="todos">
    <div class="biaoti">
      <h1>T O D O S</h1>
    </div>
    <div class="neirong">
      <div class="header">
        <span @click="dian">∨</span>
        <input type="text" placeholder="请输入内容" />
      </div>
      <div class="mid">
        <div class="mid-item" v-for="(item,index) in filterTodos">
          <input type="checkbox" />
          <span>{{item.text}}</span>
          <input type="text" />
          <span>✖</span>
        </div>
      </div>
      <div class="footer">
        <span>还有 0 个项目未完成</span>
        <div>
          <h3>全部</h3>
          <h3>未完成</h3>
          <h3>已完成</h3>
        </div>
        <span>删除全部已完成项目</span>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {mapGetters} from 'vuex';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["filterTodos","quan"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    dian: function () {
      this.quan = !this.quan;

    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.todos {
  margin: 0 auto;
  width: 50vw;
  overflow-x: hidden;
  .biaoti {
    margin-bottom: 20px;
    h1 {
      text-align: center;
      color: tomato;
      opacity: 0.5;
    }
  }

  .neirong {
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        cursor: pointer;
        flex: 1;
        border: 1px solid #ccc;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      input {
        flex: 9;
        height: 50px;
        border: #ccc 1px solid;
        outline: none;
      }
    }

    .mid {
      .mid-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        input[type="text"] {
          display: none;
          height: 40px;
        }
        input[type="checkbox"] {
          flex: 1;
          height: 20px;
        }
        span:nth-of-type(1) {
          flex: 8;
          height: 40px;
          line-height: 40px;
        }
        span:nth-of-type(2) {
          flex: 1;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        height: 30px;
        flex: 1;
        text-align: center;
        line-height: 30px;
      }

      div {
        flex: 1;
        display: flex;
        justify-content: space-around;
        h3 {
          line-height: 30px;
          text-align: center;
        }
      }
    }
  }
}
</style>
